'use client'

import { SmileIcon } from "lucide-react"
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

import {
    Popover,
    PopoverContent,
    PopoverTrigger
} from "@/components/ui/popover"

type EmojiPickerProps = {
    onChange: (value: string) => void
}

const EmojiPicker = ({ onChange }: EmojiPickerProps) => {
    return (
        <Popover>
            <PopoverTrigger>
                <SmileIcon className="h-5 w-5 text-muted-foreground hover:text-foreground transition" />
            </PopoverTrigger>
            <PopoverContent className="w-full">
                <Picker
                    emojiSize={18}
                    theme='light'
                    data={data}
                    maxFrequentRows={1}
                    onEmojiSelect={(emoji: any) => onChange(emoji.native)}
                />
            </PopoverContent>
        </Popover>
    )
}

export default EmojiPicker